<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>特价产品</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<div class="jd_layout">
		<!-- 特价产品 -->
		<div class="jd_product">
			<section class="product_box jd_sk">
				<!-- 头部 -->
				<div class="product_box_tit">
					<h3>天天特价</h3>
				</div>
				<!-- 内容 -->
				<div class="product_box_con">					
					<ul id="dataul" class="list clearfix">
						
					</ul>
					<!-- 产品信息动态添加 -->
						<script src="js/jquery-1.12.2.js"></script>
						<!-- <script src="js/jquery-lazyload.js"></script> -->
						
					<script type="text/javascript">
	$(function(){

		let num=13,i=1,loop=0,pageNum=0;
		$.ajax({
			url:"http://homework.zhangbk.cn/beecake/admin/php/productPage.php",
			type:"get",
			data:{
				"num":num,
				"page":i,
			},
			dataType:"jsonp",
			jsonp:"callback",
			jsonpCallback:"callback",
			success:function(res){
				pageNum=Math.ceil(res.count/num);
				console.log("共"+pageNum+"页");
				var str="";
				res.list.forEach(function(val){
					str+=`
						<li>
							<a href="show.html?id=${val.id}">
							<img src="${val.thumb}">
							</a>
							<p>&yen;${val.title}</p>
							<p>&yen;${val.pric}，${val.id}</p>
						</li>
					`
				});
				$(".list").html(str);
				
			}
		})

		$(window).scroll(function(){
            var scrollHeight=$(window).scrollTop();
            var screenHeight=$(window).height();
            var contentHeight=$(".jd_layout").outerHeight();
            if(scrollHeight+screenHeight>contentHeight){
            	
                i++;
                console.log(i);
                console.log("页面滚动的距离:"+scrollHeight);
                console.log("屏幕的高度:"+screenHeight);
                console.log("内容区域的高度:"+contentHeight);
                if(i>pageNum){
                	console.log("已经到了最后一页"+pageNum);
                	return;
                }
                $.ajax({
					url:"http://homework.zhangbk.cn/beecake/admin/php/productPage.php",
					type:"get",
					data:{
						"num":num,
						"page":i,
					},
					dataType:"jsonp",
					jsonp:"callback",
					jsonpCallback:"callback",
					success:function(res){
						
						var str="";
						res.list.forEach(function(val){
							// ``为模板字符串
							str+=`
								<li>
									<a href="show.html?id=${val.id}">
									<img src="${val.thumb}">
									</a>
									<p>&yen;${val.title}</p>
									<p>&yen;${val.pric}，${val.id}</p>
								</li>
							`
						});
						$(".list").append(str);
						
					}
				})

            }
       })
	})
</script>
				</div>
			</section>
		</div>
	</div>
</body>
</html>